<template>
  <div class="container_detail word-edit">
    <div class="header">
      <p>订单管理>查看订单</p>
      <el-button class="link" type="primary">
        <router-link :to="{path:'orderList',query: { pageIndex: currentPage }}" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <el-form  ref="user" label-width="120px" class="">
        <div class="list">
          <div class="title">查看订单</div>
          <el-form-item prop="storeName">
            <div class="item">
              <div class="item-key">订单号:</div>
              <div class="item-value">
                {{user.orderId}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="brandId">
            <div class="item">
              <div class="item-key">订单状态:</div>
              <div class="item-value">
                {{returnState(user.status)}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">商品名称:</div>
              <div class="item-value">
               {{user.esPayOrderDetailDTO[0].goodsName}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">商品数量:</div>
              <div class="item-value">
               {{user.esPayOrderDetailDTO[0].nums}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">金额:</div>
              <div class="item-value">
               {{user.totalPrice}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">付款方式:</div>
              <div class="item-value">
               {{returnPay(user.payType)}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">微信支付金额:</div>
              <div class="item-value">
               {{user.payPrice}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">商品类别:</div>
              <div class="item-value">
                <span style="margin-right:20px"
                v-for="(item,index) in user.esPayOrderDetailDTO" 
                :key="index">{{returnName(item.goodsType)}}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">商品规格:</div>
              <div class="item-value">
                <span style="margin-right:20px"
                v-for="(item,index) in user.esPayOrderDetailDTO" 
                :key="index">{{item.model}}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">商品分类:</div>
              <div class="item-value">
                <span style="margin-right:20px"
                v-for="(item,index) in user.esPayOrderDetailDTO" 
                :key="index">{{item.categoryName}}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">品牌名:</div>
              <div class="item-value">
                <span style="margin-right:20px"
                v-for="(item,index) in user.esPayOrderDetailDTO" 
                :key="index">{{item.brandName}}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">买家手机号:</div>
              <div class="item-value">
               {{user.mobile}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">交易时间:</div>
              <div class="item-value">
               {{user.gmtCreated}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">付款时间:</div>
              <div class="item-value">
               {{user.gmtCreated}}
              </div>
            </div>
          </el-form-item>
          <!-- s实体商铺 -->
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">联系人:</div>
              <div class="item-value">
               {{user.trueName}}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <div class="item-key">联系电话:</div>
              <div class="item-value">
               <div v-if="editState"><el-input type="text" v-model="mobile" placeholder="请输入"></el-input></div>
               <div v-else>{{user.mobile||''}}</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item  v-if="user.orderType == 'real'" prop="userName">
            <div class="item">
              <div class="item-key">收货地址:</div>
              <div class="item-value">
                <div v-if="editState"><el-input type="text" v-model="address" placeholder="请输入"></el-input></div>
               <div v-else>{{user.address||''}}</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="user.orderType == 'real'&&user.deliveryDay" prop="userName">
            <div class="item">
              <div class="item-key">配送时间:</div>
              <div class="item-value">
               {{user.deliveryDay}}
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="user.orderType == 'real'&&!user.deliveryDay" prop="userName">
            <div class="item">
              <div class="item-key">配送日期:</div>
              <div class="item-value">
                {{user.deliveryTime?user.deliveryTime.split(' ')[0]:''}}
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="user.orderType == 'real'&&!user.deliveryDay" prop="userName">
            <div class="item">
              <div class="item-key">配送时间:</div>
              <div class="item-value">
                 {{user.deliveryTime?user.deliveryTime.split(' ')[1]:''}}
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="user.orderType == 'real'" prop="userName">
            <div class="item">
              <div class="item-key">备注:</div>
              <div class="item-value">
               {{user.remark||''}}
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="user.orderType == 'real'" prop="userName">
            <div class="item">
              <div class="item-key">快递信息:</div>
              <div class="item-value">
                <div v-if="editState"><el-input style="width:500px;" :rows="5" type="textarea" v-model="dhlMsg" placeholder="请输入"></el-input></div>
               <div v-else>{{user.dhlMsg||''}}</div>
              </div>
            </div>
          </el-form-item>
          <!-- 自营电子券 -->
           <el-form-item  v-if="user.orderType == 'virtual'" prop="userName">
            <div class="item">
              <div class="item-key">兑换码:</div>
              <div class="item-value">
               {{user.esPayOrderDetailDTO[0].virtualCardUseRecordDTO?returnGoodsCode(user.esPayOrderDetailDTO[0].virtualCardUseRecordDTO):'--'}}
              </div>
            </div>
          </el-form-item>
          <el-form-item  v-if="user.orderType == 'virtual'" prop="userName">
            <div class="item">
              <div class="item-key">有效期:</div>
              <div class="item-value">
                {{user.esPayOrderDetailDTO[0].virtualCardUseRecordDTO?user.esPayOrderDetailDTO[0].virtualCardUseRecordDTO[0].validTime.split(' ')[0]:'--'}}
              </div>
            </div>
          </el-form-item>
          <!-- 第三方电子券 -->
           <el-form-item v-if="user.orderType == 'third'" prop="userName">
            <div class="item">
              <div class="item-key">链接:</div>
              <div class="item-value">
                <span class="value-list" v-for="(item,index) in goodsArr" :key="index">{{item.url}}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="user.orderType == 'third'" prop="userName">
            <div class="item">
              <div class="item-key">兑换码:</div>
              <div class="item-value">
                <span class="value-list" v-for="(item,index) in goodsArr" :key="index">{{item.couponPsw}}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="user.orderType == 'third'" prop="userName">
            <div class="item">
              <div class="item-key">有效期:</div>
              <div class="item-value">
                <span class="value-list" v-for="(item,index) in goodsArr" :key="index">{{item.validTime?item.validTime.split(' ')[0]:''}}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button style="margin:20px 30%;" type="primary" v-if='!editState' @click="editBtn">编辑</el-button>
            <el-button style="margin:20px 30%;" type="primary" v-if='editState' @click="handleSave('user')">保存</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");

export default {
  data() {
    return {
      id: "",
      info: "",
      // 返回 导航页码
      currentPage: 1,
      user: {
        "brandId": "",
        "brandName": "",
        "id": "",
        "psw": "",
        "psw2": "",
        "storeName": "",
        "userName": ""
     },
      typeArr:[
        {
            name:'实体商品',
            value:'real'
        },
         {
            name:'自营电子券',
            value:'virtual'
        },
        {
            name:'第三方电子券',
            value:'third'
        }
      ],
      statusArr:[
        {
          name:'已完成',
          value:'finish'
        },
        {
          name:'已使用',
          value:'use'
        },
        {
          name:'未使用',
          value:'notuse'
        },
        {
          name:'已过期',
          value:'expire'
        },
        {
          name:'已支付',
          value:'pay'
        },
        {
          name:'待支付',
          value:'wait'
        },
        {
          name:'已取消',
          value:'cancel'
        },
      ],
      payType:{
        'weixin':'微信支付',
        'coins':'余额',
        'coupon':'福利卡券'
      },
      goodsArr:[],
      mobile:'',
      dhlMsg:'',
      address:'',
      editState:false,
      rules:{}
    };
  },
  mounted() {
    this.id = this.$router.currentRoute.query.id;
    this.currentPage = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getDetail();
  },
  methods: {
    returnDeliverTime(val){
      let str;
      if(val){
        str = val.split(' ')[1]
        let arr = str.split(':')
        arr.splice(2,1)
        str = arr.join(':')
      }
      return str
    },
    handleSave: function(formName) {
          let url = CONSTANT.URL.LIST.compileOrder;
          let param = {
            mobile:this.mobile,
            dhlMsg:this.dhlMsg,
            address:this.address,
            id:this.user.id
          }
          common.requestAjax(url,JSON.stringify(param), null, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "保存成功!"
              });
              this.editState = false
              this.getDetail()
            } else {
              this.$message({
                type: "warning",
                message: res.msg
              });
            }
          });
    },
    returnGoodsCode(arr){
      let str ='';
      arr.map(item=>{
        str  = str?str+','+item.goodsCode:str+item.goodsCode
      })
      return str
    },
    returnName(val){
          let str;
          this.typeArr.map(item=>{
              if(item.value == val){
                  str = item.name
              }
          })
          return str
      },
    returnPay(obj){
      let arr = [],
          arr1 = obj.split(',')
      arr1.map(item=>{
        arr.push(this.payType[item])
      })
      return arr.length?arr.join(','):'--'
    },
    returnState(state){
      let str;
      this.statusArr.map(item=>{
        if(item.value == state){
          str = item.name
        }
      })
      return str||state
    },
    editBtn(){
      this.editState = true
    },
     getDetail() {
      let url = CONSTANT.URL.LIST.findEsPayOrderById;
      let data = { id: this.id }
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.user = res.data.bussData;
        this.mobile = this.user.mobile
        this.dhlMsg = this.user.dhlMsg
        this.address = this.user.address

        this.goodsArr = this.user.esPayOrderDetailDTO?this.user.esPayOrderDetailDTO[0].esThirdCouponDetailDTO:[]
      });
    }
  }
};
</script>
<style lang="scss">
.word-edit {
  .el-form-item {
    margin: 0px;
    .value-list{
      margin-right: 20px;
    }
  }

  .item-value {
    .el-input {
      width: 100%;
    }
    .el-select {
      width: 100%;
      .el-input {
        width: 100%;
      }
    }
  }
  .el-form-item__content {
    margin: 0px !important;
  }
}
</style>

